<template>
	<view class="container">
		<view class="text-area">
			<text class="label">输入值：</text>
			<input type="text" v-model="title" class="input-primary" />
		</view>
		<view class="text-area">
			<text class="label">回传值：</text>
			<input type="text" v-model="callBackValue" class="input-secondary" />
		</view>

		<ComA :intent="title" @sendToCompB="handleSendToCompB"></ComA>
		<ComB :result="compAValue" :callbackValue="callBackValue" @update:callbackValue="handleCallbackUpdate"></ComB>
	</view>
</template>

<script>
	import ComA from '../../components/ComA.vue'
	import ComB from '../../components/ComB.vue'

	export default {
		components: {
			ComA,
			ComB
		},
		data() {
			return {
				title: 'Hello',
				callBackValue: '0595-27888888',
				compAValue: ''
			}
		},
		methods: {
			handleCallbackUpdate(value) {
				this.callBackValue = value;
			},
			handleSendToCompB(value) {
				this.compAValue = value;
			}
		}
	}
</script>

<style>
	.container {
		padding: 40rpx;
		background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
		min-height: 100vh;
	}

	.text-area {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 25rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 16rpx;
		border: 2rpx solid #e1f0ff;
		box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.label {
		font-size: 32rpx;
		color: #2c5282;
		margin-right: 20rpx;
		font-weight: 600;
	}

	.input-primary {
		flex: 1;
		color: #2b6cb0;
		font-size: 32rpx;
		border: 2rpx solid #90cdf4;
		border-radius: 8rpx;
		padding: 20rpx;
		background: #f7fafc;
		transition: all 0.3s ease;
	}

	.input-primary:focus {
		border-color: #3182ce;
		background: #fff;
		box-shadow: 0 0 0 3rpx rgba(49, 130, 206, 0.1);
	}

	.input-secondary {
		flex: 1;
		color: #2c5282;
		font-size: 32rpx;
		border: 2rpx solid #63b3ed;
		border-radius: 8rpx;
		padding: 20rpx;
		background: #f0fff4;
		transition: all 0.3s ease;
	}

	.input-secondary:focus {
		border-color: #38a169;
		background: #fff;
		box-shadow: 0 0 0 3rpx rgba(56, 161, 105, 0.1);
	}
</style>